<template>
	<view class='minepage'>
		<view class="body-up">
			<view class="body-info">
				<view class="body-info-up">
					<view class="avatar">
						<!-- <image src="../../static/logo.png"></image> -->
						<image :src='avatarUrl'></image>
						<text>{{nickName}}</text>
					</view>
					<view class="login-button" v-if="!userInfo">
						<!-- #ifdef MP-WEIXIN -->
						<button style="border: none; width: 200upx; padding: 0upx " open-type="getUserInfo" size="mini" @getuserinfo="getuserinfo"
						 plain="true">
							<view>
								<text>立即登录</text>
							</view>
						</button>
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<view @click="login()">
							<text>立即登录</text>
						</view>
						<!-- #endif -->
					</view>
					<view class="login-integer" v-if="userInfo">
						<view class="login-integer-four">
							<text>{{integral || 0}}</text>
						</view>
						<view class="login-integer-five">
							<text>当前积分：{{integral || 0}}</text>
						</view>
					</view>
				</view>
				<view class="body-info-down">

					<view class="integral iconfont icon-uniEB" @click="getmudidi('1')">
						<text>
							积分明细
						</text>
					</view>

					<view class="col"></view>

					<view class="integral iconfont icon-lingqu" @click="getmudidi('2')">
						<text>
							签到领积分
						</text>
					</view>

				</view>
			</view>

		</view>
		<view class="dong-image" v-if="userInfo" @click="goIntegral()">
			<view>
				<image src="../../static/img/mine/jifen.jpg" mode=""></image>
			</view>
		</view>
		<view class="body-down">
			<view class="my-order-text">
				<text>常用工具</text>
			</view>
			<view class="my-order">
				<view class="my-order-up">
					<view class="iconfont icon-lingquanzhongxin order one-order" @click="getmudidi('7')">
					
						<view class="dingdan">
							<text>领券中心</text>
						</view>
					
					</view>
					<view class="order-text-cow"></view>
					<view class="iconfont icon-wodequan order " @click="getmudidi('8')">
					
						<view class="dingdan">
							<text>我的券</text>
						</view>
					
					</view>
					<view class="iconfont icon-gouwuche order one-three" @click="getmudidi('6')">
					
						<view class="dingdan">
							<text>购物车</text>
						</view>
						<view class="source">
							<view class="source-dot" :class="[total>99 ? 'source-point':'source-num']">
								<text>{{total>99 ? '...':total}}</text>
							</view>
						</view>
					</view>
					
				</view>
				<view class="order-text-cow-right"></view>
				<view class="my-order-down">
					<view class="iconfont icon-gouwu order one-order" @click="getmudidi('4')">
					
						<view class="dingdan">
							<text>购物订单</text>
						</view>
					
					</view>
					<view class="iconfont icon-jifen order two-order" @click="getmudidi('5')">
					
						<view class="dingdan">
							<text>积分订单</text>
						</view>
					
					</view>
					<!-- 无效 -->
					<view class="  order two-order" >
						<view class="dingdan">
							<text></text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="foot" :class="[userInfo ? '' : 'foot-bottom']">
			<footLogo></footLogo>
		</view>	
	</view>
</template>

<script>
	import footLogo from "@/components/foot-logo/footLogo.vue"
	export default {
		components:{
			footLogo
		},
		data() {
			return {
				hasUserInfo: false,
				avatarUrl: "",
				nickName: "",
				code: '',
				rawData: {},
				showView: true,
				showViews: false,
				userInfo: {},
				integral: '',
				total:'0'
			}
		},
		onLoad: function(options) {
			// if (!this.pub.getUserInfo()) {
			// 	let code = "";
			// 	if (window.location.href.indexOf("code") != -1) {
			// 		code = this.pub.getQueryString("code")
			// 		console.log("urlcode----------------------------->", code);
			// 		this.getOpenid(code)
			// 	}
			// };
			// this.getIntegral(this.pub.getUserInfo().memberId)
		},
		onShow: function() {
	
			if (!this.pub.getUserInfo()) {
				let code = "";
				if (window.location.href.indexOf("code") != -1) {
					code = this.pub.getQueryString("code")
					console.log("urlcode----------------------------->", code);
					this.getOpenid(code)
				}
			}else{
				//获取购物车列表
				this.getShoppingList()
			}
			this.getIntegral(this.pub.getUserInfo().memberId)
			//#ifdef H5
			document.title = '我的'
			//#endif
		},
		methods: {
			getIntegral: function(memberId) {
				let params = {
					channelType: '5',
					memberId: memberId 
				}
				this.$postApi(this.$path.GET_INTERGRAL_BY_ID, params).then(res => {
					console.log("登录用户积分数据返回-------->", res.data)
					if (res.data.success) {
						let userinfo = this.pub.getUserInfo()
						userinfo.integral = res.data.data.integral
						this.pub.setUserInfo(userinfo)
					}
					this.userInfo = this.pub.getUserInfo();
					this.integral = this.userInfo.integral
					console.log("登录用户信息-------->", this.userInfo);
					this.avatarUrl = this.userInfo ? this.userInfo.headimgurl : '/static/img/default_icon.png';
					this.avatarUrl = this.avatarUrl.toString().replace(/http/, 'https');
					this.nickName = this.userInfo ? this.userInfo.nickname : "未登录";
				})
			},
			goIntegral: function() {
				uni.redirectTo({
					url: '/pages/integral/integral',
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
			getOpenid: function(code) {
				let params = {
					code: code, //要去换取openid的登录凭证,
					channelType: this.pub.channelType
				}
				// let _that = this
				this.$postApi(this.$path.WX_GET_OPENIDH5, params).then(res => {
					console.log("获取的用户信息", res.data)
					if (res.data.success) {
						this.pub.setUserInfo(res.data.data)
						// this.avatarUrl = this.pub.getUserInfo().headimgurl
						// this.nickName = this.pub.getUserInfo().nickname
					} else {
						this.pub.showError(res.data.error.errorMessage)
					}
					callback(true)
				}).fail(data => {
					callback(false)
				})
			},
			login: function() {
				uni.showModal({
					title: '登录',
					content: '确认登录？',
					showCancel: true,
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							// let userinfo = this.pub.getUserInfo()
							if (this.userInfo) {
								this.avatarUrl = this.userInfo.headimgurl
								this.nickName = this.userInfo.nickname
							} else {
								let originUrl = window.location.href;
								// let appid = this.pub.getAppid()
								let appid = this.pub.appId
								let link =
									`https://open.weixin.qq.com/connect/oauth2/authorize?
								appid=${appid}&redirect_uri=${encodeURIComponent(originUrl)}&reurl=11&response_type=code&scope=${'snsapi_userinfo'}&state=321#wechat_redirect`
								window.location.href = link
							}

						} else if (res.cancel) {
							console.log('用户点击取消');
						}

					},

				})
			},
			getmudidi: function(type) {
				if(this.pub.checkUserInfo()){
					// if(true){
					switch (type) {
						//积分明细
						case "1":
							console.log(111)
							uni.navigateTo({
								url: '/pages/my/integral_detail',
								animationType: 'pop-in',
								animationDuration: 200
							});
							break;
							//签到领积分
						case "2":
							console.log(222)
							uni.navigateTo({
								url: '/pages/my/check_in_integer',
								animationType: 'pop-in',
								animationDuration: 200
							})
							break;
							//购物订单
						case "4":
							uni.navigateTo({
								url: '/pages/orderlist/orderlist',
								animationType: 'pop-in',
								animationDuration: 200
							})
							break;
							//积分订单
						case "5":
							uni.navigateTo({
								url: '/pages/integralOrder/integralOrder',
								animationType: 'pop-in',
								animationDuration: 200
							})
							break;
							//购物车
							case "6":
								uni.navigateTo({
								url: '/pages/shopping_new/glance-ShopCart',
								animationType: 'pop-in',
								animationDuration: 200
								})
								break;
							//领券中心
							case "7":
								uni.navigateTo({
								url: '/pages/discount/linquan_center',
								animationType: 'pop-in',
								animationDuration: 200
								})
								break;
							//我的券
							case "8":
								uni.navigateTo({
								url: '/pages/discount/my-quan',
								animationType: 'pop-in',
								animationDuration: 200
								})
								break;
						default:
							break;
					}
				}
			},
			//获取购物车列表
			getShoppingList:function(){
				let params = {
					
					memberId: this.pub.getUserInfo().memberId
					// memberId: this.pub.getUserInfo().memberId || '4f0abd1af84d4168ba27ac00b63fcb2e'
				}
				this.$postApi(this.$path.GET_SHOP_LIST, params).then(res => {
					console.log("购物车列表数据------------->", res.data)
					
					if (res.data.success) {
						
							this.total=res.data.data.total
							
					}else{
						this.total=0
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.minepage {
		font-size: 34upx;
		padding: 0;
		margin: 0;
		background-color: #f7f7f7;
		min-height: 100%;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.body-up {
		padding: 44upx;
		height: 500upx;
		width: 100%;
		background: url(../../static/img/mine/mybackground.jpg) no-repeat;
		background-size: 100% 100%;

		.body-info {
			// height: 400upx;
			padding: 14upx 37upx;

			.body-info-up {

				height: 250upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1upx solid #FFB9A4;

				.avatar {
					display: flex;
					align-items: center;
					height: 92upx;
					// justify-content: center;
				}

				.avatar image {
					width: 92upx;
					height: 100%;
					border-radius: 50%;
				}
				
				.avatar text{
					width: 228upx;
					margin-left: 20upx;
					font-size: 36upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: rgba(102, 102, 102, 0.7);
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.login-button {
					width: 50%;
					display: flex;
					justify-content: center;
				}

				.login-button-hide {
					display: none;
				}

				.login-integer {
					width: 50%;
					display: flex;
					justify-content: center;
					flex-direction: column;

				}

				.login-integers {
					display: none;
				}

				.login-integer-four {
					display: flex;
					justify-content: flex-end;

				}

				.login-integer-four text {

					// 	width:141upx;
					// 	height:72upx;
					font-size: 88upx;
					font-family: HYCuHeiJ;
					font-weight: 400;
					color: rgba(0, 0, 0, 1);
					// 	line-height:9upx;

				}

				.login-integer-five {
					display: flex;
					justify-content: flex-end;

				}

				.login-integer-five text {
					// 	width:362upx;
					// 	height:65upx;
					font-size: 26upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(51, 51, 51, 1);

					// 	opacity:0.9;
				}

				.login-button view {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 197upx;
					height: 68upx;
					background: #FF5E04;
					border-radius: 34upx;
					color: #fff;
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 32upx;
				}

				.my-button {
					border: none;
					width: 200upx;
					padding: 0upx
				}

			}

			.body-info-down {
				padding: 44upx 50upx 44upx 50upx;
				display: flex;
				justify-content: space-between;

				.col {
					width: 1upx;
					height: 49upx;
					border: 1upx solid rgba(255, 185, 164, 1);
				}

				.integral {
					display: flex;
					justify-content: center;
					width: 197upx;
					height: 49upx;
					border: 1upx solid rgba(255, 94, 4, 1);
					border-radius: 25upx;
					opacity: 0.9;
					font-size: 28upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(255, 94, 4, 1);
					align-items: center;
					line-height: 8upx;


				}

				.integral text {
					margin-left: 6upx;
				}

			}
		}
	}

	.body-down {
		padding: 42upx 24upx 0 24upx;

		.my-order-text {
			padding: 0 11upx 34upx 11upx;
			width: 242upx;
			height: 85upx;
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #1A1A1A;
		}

		.my-order {
			display: flex;
			flex-direction: column;
			width: 100%;
			padding: 0 54upx;
			background: rgba(255, 255, 255, 1);
			border-radius: 20upx;
			position: relative;
			margin-bottom: 36upx;
			.my-order-up{
				display: flex;
				flex-direction: row;
				height: 214upx;
				justify-content: space-between;
				border-bottom: 1px solid rgba(237,237,237,1);
			}
			.my-order-down{
				display: flex;
				flex-direction: row;
				align-items: center;
				height: 210upx;
				justify-content: space-between;
			}
			.order-text-cow {
				width: 1upx;
				height: 305upx;
				background: rgba(237, 237, 237, 1);
				top: 64upx;
				left: 237upx;
				position: absolute;
			}
			.order-text-cow-right{
				width: 1upx;
				height: 305upx;
				background: rgba(237, 237, 237, 1);
				top: 64upx;
				right: 241upx;
				position: absolute;
			}
			.order {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				color: rgba(255, 94, 4, 1);
				
			}
			.one-order{
				font-size: 36upx;
				line-height: 36upx;
			}
			
			.two-order{
				font-size: 41upx;
				line-height: 39upx;
			}
			.one-three{
				font-size: 41upx;
				line-height: 37upx;
			}
			.dingdan {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 21upx;
				width: 151upx;
				height: 28upx;
				font-size: 30upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(26, 26, 26, 1);
			}
			.source{
				position: relative;
			}
			.source-dot{
				width:29upx;
				height:29upx;
				background:rgba(255,94,4,1);
				border-radius:50%;
				position: absolute;
				bottom: 69upx;
				left: 3upx;
				display: flex;
				justify-content: center;
				align-items: center;
				line-height: 12px;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(255,255,255,1);
			}
			.source .source-point text{
				font-size: 26upx;
				line-height: 18upx;
				position: absolute;
				bottom: 14upx;
				left: 6upx;
			}
			.source .source-num text{
				font-size: 18upx;
				line-height: 12px;
				color:rgba(255,255,255,1);
			}
		}
	}

	.dong-image {
		padding: 30upx 20upx 0upx;

		view {
			height: 162upx;
			border-radius: 20upx;

			image {
				border-radius: 20upx;
			}
		}
	}
	.foot{
		// position: fixed;
		width: 100%;
		// padding-bottom: 40upx;
		// bottom: 0;
	}
	.foot-bottom{
		position: fixed;
		bottom: 0upx;
	}
</style>
